<template>
  <div class="notice__list" ref="list" v-top-loading="data.loading">
    <div class="notice__List-wrap">
      <template v-if="data.list && data.list.length || data.loading">
        <div class="notice__item" v-for="item of data.list" :key="item.id">
          <template v-if="$scopedSlots.default"><slot :data="item" :type="type"/></template>
          <template v-else>
            <NoticeItem :data="item" :type="type"/>
          </template>
        </div>
      </template>
      <Notice-empty v-else/>
      <div class="notice-pagination" v-if="data.total_count > perPage">
        <el-pagination
          @current-change="onCurrentChange"
          :current-page="data.current_page"
          :page-size="perPage"
          layout="total, prev, pager, next, jumper"
          :total="data.total_count">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import config from '@/config'
import NoticeItem from './NoticeItem'
import NoticeEmpty from './Empty'
export default {
  components: { NoticeItem, NoticeEmpty },
  props: {
    data: {
      required: true,
      default: () => { return {} }
    },
    type: {
      required: true,
      default: 'atme'
    },
    loading: {
      default: false
    }
  },
  data () {
    return {
      avatarSize: 30,
      perPage: config.listPerPage
    }
  },
  methods: {
    onCurrentChange (page) {
      this.$emit('page-change', {
        page,
        onSuccess: () => {
          this.$scrollTo(this.$refs.list, 500, {
            container: '#notifications-main'
          })
        }
      })
    }
  }
}
</script>

